<template>
  <div class="active">
    <h3 style="margin-bottom: 50px">申请评审中止</h3>
    <el-form :model="form" label-width="120px">
      <el-form-item label="申请中止原因：">
        <el-input
          v-model="form.breakRemark"
          type="textarea"
          placeholder="请输入申请中止原因"
        ></el-input>
      </el-form-item>
      <div v-if="Previous == 'taskBreak'">
        <el-form-item label="请示领导材料：">
          <div v-if="filePath">
            {{ filePath }}
            <span
              class="link"
              @click="
                () => {
                  filePath = null;
                  selectedFile = null;
                }
              "
              >删除</span
            >
          </div>
          <div v-else style="width: 100%">
            <el-upload
              drag
              action="#"
              :on-success="
                (response, file, fileList) => handleFileChange(file, fileList)
              "
              :on-change="(file, fileList) => handleFileChange(file, fileList)"
              :limit="1"
              :auto-upload="false"
              :accept="'.pdf'"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </div>
          <!-- <input v-else type="file" accept=".pdf" @change="handleFileChange" /> -->
        </el-form-item>
        <el-form-item label="请示领导指示：">
          <el-input
            v-model="form.ratifyExecRemark"
            type="textarea"
            placeholder="请输入请示领导指示"
            :disabled="filePath"
          ></el-input>
        </el-form-item>
        <el-form-item label="请示领导意见：">
          <el-radio-group v-model="form.execStatus">
            <el-radio label="continue">继续评审</el-radio>
            <el-radio label="end">结束评审</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请示领导时间：">
          <el-date-picker
            v-model="form.ratifyExecTime"
            type="datetime"
            placeholder="请选择日期时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </div>
      <div v-else-if="Previous == 'taskResultBreak'">
        <el-form-item label="请示领导材料：">
          <div v-if="filePath">
            {{ filePath }}
            <span
              class="link"
              @click="
                () => {
                  filePath = null;
                  selectedFile = null;
                }
              "
              >删除</span
            >
          </div>
          <div v-else style="width: 100%">
            <el-upload
              drag
              action="#"
              :on-success="
                (response, file, fileList) => handleFileChange(file, fileList)
              "
              :on-change="(file, fileList) => handleFileChange(file, fileList)"
              :limit="1"
              :auto-upload="false"
              :accept="'.pdf'"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </div>
          <!-- <input v-else type="file" accept=".pdf" @change="handleFileChange" /> -->
        </el-form-item>
        <el-form-item label="请示领导指示：">
          <el-input
            v-model="form.resultRatifyExecRemark"
            type="textarea"
            placeholder="请输入请示领导指示"
            :disabled="filePath"
          ></el-input>
        </el-form-item>
        <el-form-item label="请示领导意见：">
          <el-radio-group v-model="form.execStatus">
            <el-radio label="continue">继续评审</el-radio>
            <el-radio label="end">结束评审</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请示领导时间：">
          <el-date-picker
            v-model="form.resultRatifyExecTime"
            type="datetime"
            placeholder="请选择日期时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </div>
      <div style="text-align: center">
        <el-button @click="onCancel">返回</el-button>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { choiceSupplier, queryTaskId, execTask } from "@/api/examine.js";
import UploadItem from "@/components/UploadItem.vue";
import { judgeProjectInfo } from "@/api/project.js";
import { useRoute, useRouter } from "vue-router";

import { uploadProjectFile } from "@/api/apply";
const router = useRouter();

const route = useRoute();
const projectCode = ref("");
const projectId=ref("")
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const id = computed(() => route.query.id);
const type = computed(() => route.query.type);
const form = ref({
  id: id.value,
  breakRemark: "",
  material: "",
  execStatus: "",
});
const Status = ref("");
const filePath = ref(null); // 用于存储文件上传后的路径
const onCancel = () => {
  if (window.history.length > 1) {
    window.history.back(); // 返回上一页
  } else {
    router.push(`judgeProject?type=${route.query.type}`);
    window.location.reload(); // 刷新当前页面
  }
};
const token = localStorage.getItem("token");
const Token = computed(() => ({
  Authorization: token,
}));

const selectedFile = ref(null); // 创建一个空的FormData对象用于存储表单数据
// 处理文件选择事件
const handleFileChange = async (file, fileList) => {
  if (file.size > 1024 * 1024 * 5) {
    ElMessage.error("文件大小不能超过5MB");
    fileListUploadCandidate.value = fileList.filter((f) => f.uid !== file.uid);
    return;
  }
  filePath.value = file.name;
  const formData = new FormData();
  formData.append("file", file.raw);
  formData.append("projectCode", projectCode.value);
  formData.append("projectId", projectId.value);
  selectedFile.value = formData;
  form.value.ratifyExecRemark = "";
  form.value.resultRatifyExecRemark = "";
};

const onSubmit = () => {
  if (filePath.value && selectedFile.value) {
    delete form.value.ratifyExecRemark;
    uploadProjectFile(selectedFile.value).then((res) => {
      if ((res.code = "200")) {
        if (Previous.value == "taskBreak") {
          form.value.ratifyExecFile = res.fileName;
        } else if (Previous.value == "taskResultBreak") {
          form.value.resultRatifyExecFile = res.fileName;
        }

        choiceSupplier(form.value).then((res) => {
          if (res.code == "200") {
            nextStep();
          }
        });
      }
    });
  } else {
    if (Previous.value == "taskBreak") {
      delete form.value.ratifyExecFile;
    } else if (Previous.value == "taskResultBreak") {
      delete form.value.resultRatifyExecFile;
    }
    choiceSupplier(form.value).then((res) => {
      if (res.code == "200") {
        nextStep();
      }
    });
  }
};
const nextStep = () => {
  const params = { projectId: id.value, execStatus: form.value.execStatus };
  execTask(params).then((res) => {
    if (res.code) {
      window.location.replace("");
    }
  });
};
const Previous = ref("");
const getInfo = async () => {
  await queryTaskId({ projectId: id.value }).then((res) => {
    if (res.code == "200") {
      Previous.value = res.data;
      if (res.data == "taskBreak" || res.data == "taskResultBreak") {
        Status.value = "end";
      }
    }
  });
  judgeProjectInfo({ id: id.value }).then((res) => {
    if (res.code == "200") {
      const extractFileName = (path) => {
        const regex = /[^\\/]+$/; // 匹配最后一个斜杠后的所有字符直到字符串结束
        const match = path.match(regex);
        return match ? match[0] : null;
      };
      if (Previous.value == "taskBreak") {
        if (res.data.ratifyExecFile) {
          filePath.value = extractFileName(res.data.ratifyExecFile);
        }
        form.value = {
          id: res.data.id,
          breakRemark: res.data.breakRemark,
          ratifyExecFile: res.data.ratifyExecFile,
          ratifyExecRemark: res.data.ratifyExecRemark,
          ratifyExecTime: res.data.ratifyExecTime,
        };
      } else if (Previous.value == "taskResultBreak") {
        if (res.data.resultRatifyExecFile) {
          filePath.value = extractFileName(res.data.resultRatifyExecFile);
        }
        form.value = {
          id: res.data.id,
          breakRemark: res.data.breakRemark,
          resultRatifyExecFile: res.data.resultRatifyExecFile,
          resultRatifyExecRemark: res.data.resultRatifyExecRemark,
          resultRatifyExecTime: res.data.resultRatifyExecTime,
        };
      }
      projectCode.value = res.data.oaCode;
      projectId.value=res.data.id
    }
  });
};
onMounted(() => {
  getInfo();
});
</script>
<style scoped lang="scss">
@use "./judge";
</style>
<style scoped>
.review-suspension-form {
  max-width: 800px;
  margin: 50px auto;
}

.el-card {
  border: 1px solid #dcdfe6;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
